import { useEffect, useState } from "react";
import { Container, Placeholder } from "react-bootstrap";
import api from "../request";
import Poem from "../Component/Poem";
import { Loading, LoadingContent, LoadingSkeleton } from "../Component/Loading";

function HomePage() {
    let [poem, setPoem] = useState(null);

    useEffect(() => {
        api.getHomeFeed((err, data, _) => {
            if (err) throw err;

            setPoem(data.data);
        });
    }, []);

    // 滚动加载下一个
    useEffect(() => {
        const endOfPage = () => (document.body.offsetHeight - (window.innerHeight + window.scrollY) <= 1);
        const loadNext = () => {
            let loadingTimer = setTimeout(() => setPoem(null), 500);
            api.getHomeFeed((err, data, _) => {
                if (err) throw err;
                clearTimeout(loadingTimer);
                setPoem(data.data);
                window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
            });
        };
        const scrollHandler = (e) => {
            console.log(e);
            if (e.wheelDeltaY >= 0)
                return;
            if (endOfPage())
                loadNext();
        };

        let touchStartY = 0;

        const touchStartHandler = (e) => {
            touchStartY = e.touches[0].clientY;
        };
        const touchEndHandler = (e) => {
            let touchEndY = e.changedTouches[0].clientY;
            let delta = touchEndY - touchStartY;
            if (delta > 0) 
                return;
            console.log(e, delta);
            if (endOfPage()) 
                loadNext();
        };

        window.addEventListener("wheel", scrollHandler);
        window.addEventListener("touchstart", touchStartHandler);
        window.addEventListener("touchend", touchEndHandler);
        return () => {
            window.removeEventListener("wheel", scrollHandler);
            window.removeEventListener("touchstart", touchStartHandler);
            window.removeEventListener("touchend", touchEndHandler);
        };

    }, []);

    return (
        <Container className="d-flex flex-column align-items-center justify-content-center" style={{ minHeight: "80vh" }}>
            <Loading loaded={poem}>
                <LoadingContent>
                    { poem && <Poem poem={poem} showAnnotation={false} showAppreciation={false} showTranslation={false} linkOnTitle={true} /> }
                    <br />
                    <span className="small text-muted">（滚动加载下一首诗）</span>
                </LoadingContent>
                <LoadingSkeleton>

                    <Placeholder as="h1" animation="wave" xs="3">
                        <Placeholder as="p" className="w-100"></Placeholder>
                    </Placeholder>
                    <Placeholder as="span" animation="wave" xs="2">
                        <Placeholder as="p" className="w-100"></Placeholder>
                    </Placeholder>
                    <Placeholder className="mt-5" as="p" xs="8"></Placeholder>
                    <Placeholder as="p" xs="8"></Placeholder>
                    <Placeholder as="p" xs="8"></Placeholder>
 
                </LoadingSkeleton>
            </Loading>
            
        </Container>
    );
}

export default HomePage;